<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <div class="user">
            <div>
                <el-avatar shape="square" :size="50" :src="squareUrl" />
                <div class="dd">李小狼
                    <el-tag>v1</el-tag>
                    <el-tag class="ml-2" type="success">管理员</el-tag>
                    <el-tag class="ml-2" type="info">活跃</el-tag>
                   
                </div>
            </div>
        </div>
        <!-- <el-button class="button" text>Operation button</el-button> -->
      </div>
    </template>
    <div>
        <div class="cc">
            <h3>标题</h3>
            <h4>简介</h4>
            <div>
                <el-tag class="ml-2" type="warning">文章</el-tag>
                <el-tag class="ml-2" type="warning">后端</el-tag>
            </div>
            <div>
                <span>2023-3-23 22:23</span><el-rate v-model="value2" :colors="colors"  disabled />
            </div>
        </div>
        <div class="img">
            <el-image style="width: 190px; height: 170px" :src="url" fit="cover">
                <template #error>
                <div class="image-slot">
                    <el-icon  class="is-loading"><Loading /></el-icon>
                </div>
                </template>
            </el-image>
        </div>
    </div>
  </el-card>
</template>
<script>
export default{
    data(){
       return{ 
            value2:2.5,
            color:['#99A9BF', '#F7BA2A', '#FF9900'],
            url:""
         }
    }
}
</script>
<style>

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 100%
}
.user{
    height: 60px;
    width: 760px;
    
   
}
.dd{
    display: inline-block;
   position: relative;
   bottom: 20px;
   margin-left: 15px;
}
.ml-2{
    margin-left: 5px;
}
.cc{
    width: 550px;
    float: left;
}
.img{
    margin-left: 10px;
    width:190px;
    float: left;
}
.image-slot .el-icon {
  font-size: 30px;
}
.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 30px;
}
.el-rate {
    margin-left: 35px;
    margin-bottom: 25px;
}
</style>